<template>
  <el-dialog
    :append-to-body="true"
    :before-close="cancel"
    :close-on-click-modal="false"
    :visible.sync="isDialog"
    :title="isAdd ? '新增' : '编辑'"
    width="600px"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="120px">
        <el-form-item label="医院名称" prop="locationName">
          <el-input v-model="ruleForm.locationName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="省份" prop="province">
           <el-select v-model="ruleForm.province" placeholder="请选择省份" style="width: 370px;" @change="selectProvince">
              <el-option v-for="(p,i) in provinceList" :key="i" :label="p.name" :value="p.name"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="ruleForm.city" placeholder="请选择城市" style="width: 370px;" >
            <el-option v-for="(c,i) in cityList" :key="i" :label="c.name" :value="c.name"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="地址" prop="locationAddr">
          <el-input v-model="ruleForm.locationAddr" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="精度" prop="longitude">
          <el-input v-model="ruleForm.longitude" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="维度" prop="latitude">
          <el-input v-model="ruleForm.latitude" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="坐标点个数">
          <el-input v-model="ruleForm.pointNum" type="number" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" size="mini" type="primary" @click="submit()">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import siteApi from '@/network/map/site.api'
import provinceList from '@/common/province'
import {mapActions} from 'vuex'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true,
    },
  },

  data() {
    return {
      isDialog: false,
      loading: false,
      provinceList: provinceList,
      cityList: [],
      ruleForm: {
        locationId: '',
        locationName: '',
        locationAddr: '',
        province: '',
        city: '',
        longitude: '',
        latitude: '',
        pointNum: '',
      },
      rules: {
        locationName: [
          { required: true, message: '请输入医院名称', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请输入省份', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入城市', trigger: 'blur' }
        ],
        locationAddr: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' }
        ],
      },
    }
  },

  methods: {
    ...mapActions('hospital',['saveHospitals']),
    submit() {
      let fun = this.isAdd ?  'addSite' : 'updateSite'
      let message = this.isAdd ? '添加成功' : '修改成功'
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          siteApi[fun](this.ruleForm).then(() => {
            this.loading = false
            this.$message({message: message, type: 'success',duration: 2500})
            this.cancel()
            this.saveHospitals()
          }).catch(err => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.isDialog = false
       this.ruleForm = {
        locationId: '',
        locationName: '',
        locationAddr: '',
        province: '',
        city: '',
        longitude: '',
        latitude: '',
        pointNum: '',
      }
      this.loading = false
      this.$emit('refresh')
    },
    selectProvince(province,city) {
      this.ruleForm.city = city ? city : ''
      this.cityList = this.provinceList.find(item => {
        return item.name == province
      }).cities
    }
  },
}
</script>


